<template>
  <div class="special-wrapper">
    <div class="notice">公告</div>
    <swiper :options="swiperOption"
            ref="swiper">
      <!-- slides -->
      <swiper-slide v-for="item of list"
                    :key="item.id">
        <div class="title"
             @click="handleArticle(item)">
          {{item.article_title}}
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeSpecial',
  props: {
    list: {
      type: Array
    }
  },
  data () {
    return {
      swiperOption: {
        direction: 'vertical',
        pagination: '.swiper-pagination',
        autoplay: 3000,
        click: true,
        preventLinksPropagation: false
      }
    }
  },
  methods: {
    handleArticle (item) {
      this.$router.push({
        path: `/article/${item.id}`
      })
    }
  },
  activated () {
    this.$nextTick(() => {
      this.$refs.swiper.swiper.startAutoplay()
    })
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/mixins.styl'
@import '~stylus/variable.styl'

.special-wrapper >>> .swiperOption
  flex 1

.special-wrapper
  display flex
  width 100%
  height 100px
  padding()

  .notice
    font-size $largeFz
    width 100px
    height 100px
    line-height 100px
    margin-right 20px

  .title
    width 100%
    height 100%
    display flex
    align-items center
    justify-content center
    font-size $smallFz
    color $fzColor
</style>
